<template>
  <div>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-swipe-cell v-for="(item,index) in list" :key="item.id">
        <van-cell >
          <van-row>
            <van-col :span="labelCol">物料代码：</van-col>
            <van-col :span="valueCol">{{item.wlbh}}</van-col>
          </van-row>
          <van-row>
            <van-col :span="labelCol">物料名称：</van-col>
            <van-col :span="valueCol">{{item.wlmc}}</van-col>
          </van-row>
          <van-row>
            <van-col :span="labelCol">规格型号：</van-col>
            <van-col :span="valueCol">{{item.wlgg}}</van-col>
          </van-row>
          <van-row class="flex-v">
            <van-col :span="labelCol">仓库：</van-col>
            <van-col :span="valueCol">
              <van-cell
                title
                is-link
                :value="item.FStockName==null?'请选择':item.FStockName"
                @click="clickAction(1,index)"
              />
            </van-col>
          </van-row>
          <van-row>
            <van-col :span="labelCol">送货数量：</van-col>
            <van-col :span="valueCol">{{item.fqty}}</van-col>
          </van-row>
          <van-row>
            <van-col :span="labelCol">实收数量：</van-col>
            <van-col :span="valueCol">
              <!-- <van-field v-model="item.receivedFqty" type="number" @ placeholder="数量" /> -->
              <input
                type="text"
                v-model="item.receivedFqty"
                @input="checkRecivedFqty(item)"
                placeholder="数量"
              />
            </van-col>
          </van-row>
        </van-cell>
        <template slot="right">
          <van-button
            square
            class="swipe-button"
            type="danger"
            text="删除"
            @click="delAction(index)"
          />
        </template>
      </van-swipe-cell>
    </van-list>
    <item-select ref="select" @select="selectAction"></item-select>
  </div>
</template>
<script>
import MathUtil from "../../../../tools/MathUtil";
import ItemSelect from "../../../components/ItemSelect";
import ui from "../../../../tools/ui";
import api from "../../../../tools/api";
export default {
  components: {
    ItemSelect
  },
  props: {
    list: Array
  },
  data() {
    return {
      labelCol: 8,
      valueCol: 16,
      loading: false,
      clickType: 1,
      clickIndex: 0,
      finished: true
    };
  },
  methods: {
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        // this.getList();
        // 加载状态结束
        this.finished = true;
        // console.log(JSON.stringify(this.list));
      }, 500);
    },
    selectAction(item) {
      // console.log("selectAction" + JSON.stringify(item));
      let selectItem = this.list[this.clickIndex];
      if (this.clickType == 1) {
        selectItem.FStockName = item.name;
        selectItem.FStockItemID = item.value.FItemID;
        // this.$set(this.list, this.clickIndex, selectItem);
        this.$emit("update",this.clickIndex,selectItem);

        //调接口更新
        this.updateItemStockId(selectItem.id, item.value);
      }

      this.$refs.select.hide();
    },
    clickAction(type, index) {
      this.clickType = type;
      this.clickIndex = index;
      if (type == 1) {
        this.$refs.select.show(5);
      }
    },
    updateItemStockId(deliveryId, stock) {
      ui.showLoading();
      api.ajax({
        methodName: "app/updateItemStockId",
        data: {
          id: deliveryId,
          stockId: stock.FItemID,
          stockName: stock.FName
        },
        s(code, res) {
          // console.log(JSON.stringify(res));
          if (code == 1) {
          }
          ui.hideLoading();
        }
      });
    },
    delAction(index) {
      // console.log("index=" + index);
      let self = this;
      let item = this.list[index];
      ui.showLoading();
      api.ajax({
        methodName: "app/deleteByDeliveryNoteId",
        data: {
          deliveryNoteId: item.id
        },
        s(code, res) {
          // console.log(JSON.stringify(res));
          if (code == 1) {
            self.list.splice(index, 1);
          }
          ui.hideLoading();
        }
      });
    },
    checkRecivedFqty(item) {
      // console.log("fqty=" + item.fqty);
      // console.log("recivedFqty=" + item.receivedFqty);
      if (item.receivedFqty) {
        if (item.receivedFqty > item.fqty) {
          item.receivedFqty = item.fqty;
          ui.dialog({
            msg: "实收数量不能超出送货计划数量"
          });
        }
      }
    }
  }
};
</script>

<style scoped>
.flex-v {
  display: flex;
  align-items: center;
}
.swipe-button {
  height: 100%;
}
</style>